import { cn } from '@/lib/utils';
import { HTMLAttributes, forwardRef } from 'react';

export interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'hover' | 'dark';
  blur?: 'sm' | 'md' | 'lg' | 'xl';
  children: React.ReactNode;
}

/**
 * GlassCard - Apple-style glassmorphism card component
 * 
 * Features:
 * - Frosted glass effect with backdrop blur
 * - Smooth hover transitions
 * - Light/dark mode support
 * - Multiple blur intensity options
 */
const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(
  ({ className, variant = 'default', blur = 'lg', children, ...props }, ref) => {
    const blurClasses = {
      sm: 'backdrop-blur-sm',
      md: 'backdrop-blur-md',
      lg: 'backdrop-blur-lg',
      xl: 'backdrop-blur-xl',
    };

    const variantClasses = {
      default: 'bg-white/10 border-white/20 hover:bg-white/15',
      hover: 'bg-white/10 border-white/20 hover:bg-white/20 hover:scale-[1.02] transition-all duration-300',
      dark: 'bg-black/30 border-white/10 hover:bg-black/40',
    };

    return (
      <div
        ref={ref}
        className={cn(
          'glass',
          'rounded-2xl border backdrop-saturate-150',
          'shadow-[0_8px_32px_0_rgba(31,38,135,0.15)]',
          'transition-all duration-300',
          blurClasses[blur],
          variantClasses[variant],
          className
        )}
        {...props}
      >
        {children}
      </div>
    );
  }
);

GlassCard.displayName = 'GlassCard';

export default GlassCard;

